<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>现货表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="spot-material">
      <search-btn-view immediate btn-text="查询现货" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
        <template slot="append">
          <el-button type="primary" size="medium" @click="addMaterial">新增现货</el-button>
          <el-button type="primary" size="medium" @click="importMaterials">导入现货</el-button>
          <el-button v-if="selectMaterialList.length>0" type="primary" size="medium" @click="forbiddenMaterials">批量禁用</el-button>
          <el-button v-if="cancelMaterialIds.length>0" type="primary" size="medium" @click="cancelSpot">批量取消现货</el-button>
        </template>
      </search-btn-view>
      <div class="spot-material-table-div">
        <el-table fit stripe border highlight-current-row :data="materialList" style="width: 100%" height="parent" @current-change="currentRowChange">
          <checkbox-table-column width="60px" header-text="禁用" check-field="id" fixed="left" :selectable="canForbiddenMaterial"
            @select-change="toSelectForbiddenMaterial"></checkbox-table-column>
          <checkbox-table-column width="90px" header-text="取消现货" check-field="id" fixed="left" @select-change="toSelectCancelSpot">
          </checkbox-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="model" label="规格" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="color" label="编号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="colorDescription" label="描述" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="material" label="材质" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialDeptName" label="物料部门" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="providerNo" label="供方编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="count" label="库存" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="unitPrice" label="单价" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="status" label="状态" width="50px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="purchaseApproval" label="是否审核" width="70px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.purchaseApproval===1?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" fixed="right" label="操作" :width="handleWidth" header-align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="lookDetail(scope.row)">详情</el-button>
              <el-button size="mini" type="primary" @click="updateMaterial(scope.row)">修改</el-button>
              <el-button v-if="scope.row.status==='使用'" size="mini" type="danger" @click="forbiddenMaterial(scope.row)">
                禁用
              </el-button>
              <el-button v-if="scope.row.purchaseApproval!==1" size="mini" type="primary" @click="approvalMaterial(scope.row)">
                审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :page-sizes="[10,15,20,40,50]" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="type==='add'?'新增现货':'修改现货'" :visible.sync="openForm" top="5vh" @closed="formClose">
      <div style="height: calc(85vh - 54px); overflow: auto">
        <material-form v-if="openForm" :material="selectMaterial" :type="type" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </material-form>
      </div>
    </el-dialog>

    <el-dialog fullscreen class="dialog-fullscreen" title="从物料表导入" :visible.sync="openImportMaterial">
      <import-material ref="importMaterial" :open="openImportMaterial" @import-success="importMaterialSuccess"></import-material>
    </el-dialog>

    <el-dialog title="现货详情" :visible.sync="openDetailDialog" top="5vh" @closed="formClose">
      <div style="height: calc(85vh - 54px); overflow: auto">
        <material-detail v-if="openDetailDialog" :material="selectMaterial"></material-detail>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "./css/materialForm.css",
    "./css/importMaterial.css"
  ], [
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/i18n/index.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/components/checkboxTableColumn.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/mixins/materialFormMixin.js"
  ]);

</script>
<script src="../models/customerModel.js"></script>
<script src="../models/spotMaterialModel.js"></script>
<script src="../customer/customerForm.js"></script>
<script src="./searchForm.js"></script>
<script src="./materialForm.js"></script>
<script src="./importMaterial.js"></script>
<script src="./materialDetail.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin(15)
    ],

    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        providerNo: '',
        colorDescription: '',
        defaultWarehouse: '原材料仓',
        status: 1,
        materialDept: ''
      };
      return {
        loading: false,
        materialList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        openForm: false,
        openImportMaterial: false,
        openDetailDialog: false,
        selectMaterial: null,
        currentMaterial: null,
        selectMaterialList: [],
        cancelMaterialIds: [],
        type: '',
        dropdownOption: {},
        handleWidth: '50px'
      };
    },

    methods: {
      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          view: search.status,
          providerNo: search.providerNo,
          isSpot: 1
        };
        var fields = ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'defaultWarehouse'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        this.loading = true;
        var self = this;
        return ajaxRequest("basicData/queryMaterialCompany", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          if (materialList.length === 0 && currentPage > 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setMaterialList(isSearch);
            });
            return;
          }

          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            var materialDeptId = material.materialDeptId;
            if (SysUtil.isEmpty(materialDeptId) || materialDeptId === 0) {
              materialDeptId = '';
            }
            var materialDeptName = material.materialDeptName;
            if (SysUtil.isEmpty(materialDeptName)) {
              materialDeptName = '';
            }
            material.materialDeptId = materialDeptId;
            material.materialDeptName = materialDeptName;
          }

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.currentMaterial = null;
          self.cancelMaterialIds = [];
          self.selectMaterialList = [];
          self.loading = false;
          self.resetHandleWidth();
        }).catch(function () {
          self.loading = false;
        });
      },

      resetHandleWidth: function () {
        var materialList = this.materialList;
        if (materialList.length === 0) {
          this.handleWidth = '5px';
          return;
        }
        var maxWidth = 0;
        for (var i = 0; i < materialList.length; i++) {
          var width = 0;
          var material = materialList[i];
          if (material.status === '使用') {
            width += 60;
          }
          if (material.purchaseApproval !== 1) {
            width += 60;
          }
          if (width > maxWidth) {
            maxWidth = width;
          }
        }
        this.handleWidth = `${maxWidth + 126}px`;
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      currentRowChange: function (currentMaterial) {
        this.currentMaterial = currentMaterial;
      },

      toSelectCancelSpot: function (materialIds) {
        this.cancelMaterialIds = materialIds;
      },

      toSelectForbiddenMaterial: function (ids, materialList) {
        this.selectMaterialList = materialList;
      },

      addMaterial: function () {
        this.type = 'add';
        this.selectMaterial = this.currentMaterial;
        this.openForm = true;
      },

      updateMaterial: function (material) {
        this.type = 'update';
        this.selectMaterial = material;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setMaterialList();
      },

      formClose: function () {
        this.type = '';
        this.selectMaterial = null;
      },

      canForbiddenMaterial: function (row) {
        return row.status === '使用';
      },

      forbiddenMaterial: function (material) {
        material = _.cloneDeep(material);
        delete material.materialDept;
        this.loading = true;
        var self = this;
        ajaxRequest("basicData/disableCompanyMaterial", material).then(function () {
          self.$alert("物料成功禁用", "信息", {
            callback: function () {
              self.setMaterialList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      forbiddenMaterials: function () {
        var selectMaterialList = this.selectMaterialList;
        if (selectMaterialList.length === 0) {
          return;
        }
        selectMaterialList = _.cloneDeep(selectMaterialList);
        for (var i = 0; i < selectMaterialList.length; i++) {
          var material = selectMaterialList[i];
          delete material.materialDept;
        }

        this.loading = true;
        var self = this;
        ajaxRequest("basicData/disableAllCompanyMaterial", {
          companyMaterialList: JSON.stringify(selectMaterialList)
        }).then(function () {
          self.$alert('批量禁用成功', "信息", {
            callback: function () {
              self.setMaterialList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      approvalMaterial: function (material) {
        var materialData = new SpotMaterialModel(material);
        var postData = materialData.getObject('update');
        var self = this;
        self.loading = true;
        ajaxRequest("basicData/approvalCompanyMaterial", postData).then(function (res) {
          self.$alert('该物料审核通过', '信息', {
            callback: function () {
              self.setMaterialList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      importMaterials: function () {
        this.openImportMaterial = true;
      },

      importMaterialSuccess: function () {
        this.openImportMaterial = false;
        this.setMaterialList();
      },

      cancelSpot: function () {
        var ids = this.cancelMaterialIds;
        if (ids.length === 0) {
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('basicData/updateCompanyMaterialIsSpot', {
          id: ids.join(','),
          isSpot: 0
        }).then(function () {
          self.$alert('批量成功取消现货', '信息', {
            callback: function () {
              self.setMaterialList();
              var importMaterial = self.$refs['importMaterial'];
              if (importMaterial !== undefined) {
                importMaterial.isRefresh = true;
              }
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      lookDetail: function (material) {
        this.selectMaterial = material;
        this.openDetailDialog = true;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      MaterialForm: MaterialForm,
      ImportMaterial: ImportMaterial,
      CheckboxTableColumn: CheckboxTableColumn,
      MaterialDetail: MaterialDetail
    }
  });

</script>
<style>
  .spot-material {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .spot-material .spot-material-table-div {
    flex: 1;
    overflow: auto;
  }

  .spot-material .spot-material-table-div .el-button+.el-button{
    margin-left: 0;
  }

</style>

</html>
